<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>Bookmarklet UI</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <style>
*, *:before, *:after {
	box-sizing: inherit;
}
html {
	box-sizing: border-box;
	height: 100%;
}
html, body {
	background: #eee;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, sans-serif;
	font-size: 14px;
	margin: 0;
	padding: 0;
	cursor: default;
	overflow: hidden;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
header {
  background-color: #009be5;
  line-height: 2em;
  display: flex;
  color: white;
}
header > h1 {
  margin: 0;
  font-size: 1.2rem;
  color: inherit;
  flex-grow: 1;
}
header > button {
  margin-right: .5em;
  background: transparent;
  color: inherit;
  border: none;
}
button.close {
  cursor: pointer;
}
section {
  padding: 1em;
  position: relative;
}
.actions {
  margin-bottom: .5em;
}
#loader {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffffcc;
  align-items: center;
  justify-content: center;
}
.loader-svg{
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  fill: none;
  stroke-width: 5px;
  stroke-linecap: round;
  stroke: #009be5;
}
.loader-svg.bg{
  stroke-width: 8px;
  stroke: #b6d6e6;
}
.loader-svg.animate{
  stroke-dasharray: 242.6;
  animation: fill-animation 1s cubic-bezier(1,1,1,1) 0s infinite;
}
.success {
  text-align: center;
}
.success > .svg-container {
  display: inline-block;
  border-radius: 50%;
  stroke-width: 5;
  stroke: white;
  stroke-miterlimit: 10;
  box-shadow: inset 0px 0px 0px #009be5;
  animation: fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
}
.success-svg.circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke: #009be5;
  fill: none;
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.success-svg.check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}
kbd {
  background: #fff;
  border: gray 1px solid;
  border-radius: 3px;
  padding: 1px 3px;
  margin-right: 1em;
}
@keyframes fill-animation{
  0%{
    stroke-dasharray: 40 242.6;
    stroke-dashoffset: 0;
  }
  50%{
    stroke-dasharray: 141.3;
    stroke-dashoffset: 141.3;
  }
  100%{
    stroke-dasharray: 40 242.6;
    stroke-dashoffset: 282.6;
  }
}
@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes scale {
  0%,
  100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}
@keyframes fill {
  100% {
    box-shadow: inset 0px 0px 0px 50px #009be5;
  }
}
  </style>
</head>
<body>
  <header>
    <button>≡</button>
    <h1>readflow bookmarklet</h1>
    <button class="close" onclick="window.parent.postMessage('close', '*')">×</button>
  </header>
  <section>
    <div id="loader">
      <svg class="svg-container" height="100" width="100" viewBox="0 0 100 100">
        <circle class="loader-svg bg" cx="50" cy="50" r="45"></circle>
        <circle class="loader-svg animate" cx="50" cy="50" r="45"></circle>
      </svg>
    </div>
    <div id="content">
      <div class="actions">
        <button onclick="window.parent.postMessage('content', '*')">Send content</button>
        or
        <button onclick="window.parent.postMessage('page', '*')">Send page</button>
      </div>
      <footer>
        <details open>
          <summary>Help?</summary>
          <article>
            <p>
              Click on an item on the page to delete it.
            </p>
            <p>
              <kbd>ctrl+click</kbd>to keep only this item.
            </p>
            <p>
              <kbd>ctrl+z</kbd>to undo
            </p>
          </article>
        </details> 
      </footer>      
    </div>
  </section>

<script id="success" type="text/html">
  <div class="success">
    <svg class="svg-container" height="80" width="80" viewBox="0 0 50 50">
      <circle class="success-svg circle" cx="25" cy="25" r="25" fill="none"/>
      <path class="success-svg check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
    </svg>
    <p>Article successfully put in your reaflow!</p>
    <button onclick="window.parent.postMessage('openResult', '*')">Open result</button>
  </div>
</script>
<script>
(function () {
  const $content = document.getElementById('content')
  const $success = document.getElementById('success')
  const $loader = document.getElementById('loader')
  const setLoader = (status) => $loader.style.display = status ? 'flex' : 'none'
  window.addEventListener('message', (evt) => {
    const payload = evt.data
    if (payload === 'success') {
      $content.innerHTML = $success.innerHTML
    }
    setLoader(payload === 'loading')
  })
})()
</script>
</body>
</html>
